<template>
  <view class="stock-page" :style="cssVars">
    <view class="top-container">
      <view class="top-body-container">
        <view>
          <span v-if="form.inventory_type === '全员盘点'">全员盘点</span>
          <span v-else>常规盘点</span>
          <span>{{ form.inventory_code }}</span>
        </view>
        <span>{{ form.inventory_name }}</span>
        <u-line/>
      </view>
    </view>
    <view class="body-container">
      <z-paging ref="paging" :fixed="false" @query="queryList" v-model="dataList">
        <template #top>
          <up-tabs :list="tableList"
                   @click="handlerTab"
                   :current="tableIndex"
                   lineColor="#2979ff"
                   itemStyle="background:#fff;height: 80rpx;width: 100%;border-bottom: 1rpx solid #f5f5f5;"
          />
        </template>
        <stocktaking-management-list :dataList="dataList"/>
      </z-paging>
      <view class="footer-btn" v-show="showFooter">
<!--        <up-button plain>扫码补盘</up-button>-->
        <up-button plain @click="handlerSave">保存</up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, reactive, computed} from "vue";
import StocktakingManagementList from "@/components/assetStocktaking/stocktakingManagementList";
import {onLoad} from "@dcloudio/uni-app";
import request from "@/api/request";

const cssVars = computed(() => ({
  '--padding-bottom': showFooter.value ? '150rpx' : '20rpx'
}))

const paging = ref(null)

const tableFilters = []

const tableIndex = ref(0)

const form = reactive({
  inventory_type: '',
  inventory_code: '',
  inventory_name: '',
  scan_item: '0',
  device_item: '0',
  id: ''
})

const tableList = ref([
  {
    name: '全部',
    badge: {
      value: 0
    }
  },
  {
    name: '已盘',
    badge: {
      value: 0
    }
  },
  {
    name: '未盘',
    badge: {
      value: 0
    }
  },
  {
    name: '盘盈',
    badge: {
      value: 0
    }
  },
  {
    name: '盘亏',
    badge: {
      value: 0
    }
  }
])

const showFooter = ref(false);

const status = [null, 'STARTED', 'NOT_STARTED', 'PROFIT', 'LOSS']

const dataList = ref([])

let isItem = false

onLoad((options) => {
  const item = JSON.parse(options?.item ?? null);
  if (item) {
    isItem = true
    form.inventory_code = item.inventory_code;
    form.inventory_name = item.inventory_name;
    form.inventory_type = item.inventory_type;
    for (let i = 0; i < 5; i++) {
      tableFilters.push({
        inventory_code: item.inventory_code,
        status: status[i]
      })
    }
    requestData()
  }
  const show = options?.show ?? '0'
  if (show === '1') {
    showFooter.value = true
    form.id = item.id
  }
  form.scan_item = options?.scanItem ?? '0'
  form.device_item = options?.deviceItem ?? '0'
})

const queryList = (pageNo, pageSize) => {
  if (!isItem) return
  uni.showLoading({
    title: '加载中...',
    mask: true
  })
  let params = {
    allColumnFilter: true,
    code: 'getAssetInventorydetailfordelete',
    filters: [
      {
        name: 'inventory_code',
        value: tableFilters[tableIndex.value].inventory_code
      },
      {
        name: 'status',
        value: tableFilters[tableIndex.value].status
      }
    ],
    pageInput: {
      currentPage: pageNo,
      pageSize: pageSize
    }
  }
  return request.post('/api/module/GetViewTable', params).then(res => {
    if (res.code && res.isSuccess) {
      paging.value.complete(res.result.viewTable)
      uni.hideLoading()
    } else {
      uni.showToast({title: res.error, duration: 1500, icon: "error"});
      uni.hideLoading();
    }
  }).catch(err => {
    console.error(err)
    uni.hideLoading()
  })
}

const requestData = async () => {
  const batchRequests = tableFilters.map((item, index) => {
    const params = {
      allColumnFilter: true,
      code: 'getAssetInventorydetailfordelete',
      filters: [
        {
          name: 'inventory_code',
          value: item.inventory_code
        },
        {
          name: 'status',
          value: item.status
        }
      ],
      pageInput: {
        currentPage: 1,
        pageSize: 999
      }
    }
    return request.post('/api/module/GetViewTable', params).then(res => ({
      ...res,
      index: index
    }))
  })
  try {
    const results = await Promise.all(batchRequests)
    results.forEach(({result, index}) => {
      tableList.value[index].badge.value = result?.totalCount ?? 0
    })
  } catch (e) {
    console.error(e)
  }
}

const handlerTab = (tab) => {
  tableIndex.value = tab.index;
  paging.value.reload()
}

const handlerSave = () => {
  uni.navigateTo({
    url: '/pages/assetStocktaking/patrol?item=' + JSON.stringify(form)
  })
}
</script>

<style scoped lang="scss">

.stock-page {
  width: 100%;
  height: calc(100vh - var(--window-top));

  :deep(.zp-view-super) {
    padding-bottom: var(--padding-bottom) !important;
  }

  .footer-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 130rpx;
    background-color: #4792FD;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;

    > :deep(.u-button.u-reset-button.u-button--info.u-button--square.u-button--normal.u-button--plain) {
      background-color: #4792FD;
      border: none;
      color: white;
      height: 100%;
    }
  }

  .top-container {
    height: 220rpx;
    width: 100%;
    background-color: #4792FD;
    display: flex;
    justify-content: center;
    align-items: center;

    .top-body-container {
      height: 180rpx;
      width: calc(100% - 40rpx);
      background-color: #5c99fa;
      border-radius: 10rpx;
      padding: 20rpx;

      & > span {
        display: block;
        margin: 20rpx 0;
        color: #A9DAF1;
        font-size: 0.8rem;
      }

      & > view:first-child {
        display: flex;
        align-items: center;
        line-height: 50rpx;

        & > span:first-child {
          height: 50rpx;
          background-color: white;
          border-radius: 5rpx;
          padding: 5rpx 10rpx;
          font-size: .9rem;
          color: #6494CE;
          letter-spacing: .1rem;
        }

        & > span:last-child {
          margin-left: 20rpx;
          font-size: .8rem;
          color: white;
        }
      }
    }
  }

  .body-container {
    height: calc(100% - 220rpx);
    width: 100%;
  }
}
</style>